<template>
    <div class="menu">
        <search-form :searchArray="searchArray" :searchObj="searchObj"  @search="getList">
            <el-button type="primary" class="search mL20" @click="add">新增</el-button>
        </search-form>
        <elTable :formData="formData" @getList="getList">
                <el-table-column prop="name" label="菜单名称" align="center"></el-table-column>
                <el-table-column prop="group" label="用户组" align="center">
                    <template slot-scope="scope">
                        {{scope.row.group && scope.row.group.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="parentMenu" label="上级菜单" align="center">
                    <template slot-scope="scope">
                        {{scope.row.parentMenu && scope.row.parentMenu.name || ''}}
                    </template>
                </el-table-column>
                <el-table-column prop="url" label="路由菜单" align="center"></el-table-column>
                <el-table-column prop="statusMessage" label="状态" align="center"></el-table-column>
                <el-table-column prop="action" label="操作" align="center" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="clock(scope.row)" v-if="scope.row.status != 1">{{scope.row.status == 0 ? '上架' : '下架'}}</el-button>
                        <el-button type="text"  @click="editer(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
        </elTable>
        <dialogs
        :visible="visible"
        :title="`${isEditer ? '编辑' : '新增'}菜单`"
        width="500px"
        @confirm="save"
        >
            <el-form v-model="formMenu" label-width="100px">
                <el-form-item prop="name" label="菜单名称">
                    <el-input v-model.trim="formMenu.name" placeholder="请输入菜单名称"></el-input>
                </el-form-item>
                <el-form-item prop="store" label="所属用户组">
                    <el-select v-model="formMenu.group.id" style="width: 100%;">
                        <el-option  v-for="(item, i) in groupList" :label="item.name" :value="item.id" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="store" label="父级菜单">
                    <el-select v-model="formMenu.parentMenu.id" style="width: 100%;">
                        <el-option  v-for="(item, i) in menuList" :label="item.name" :value="item.id" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="name" label="菜单地址">
                    <el-input v-model.trim="formMenu.url" placeholder="请输入菜单地址"></el-input>
                </el-form-item>
                <el-form-item prop="name" label="菜单排序">
                    <el-input v-model.trim="formMenu.sort" placeholder="请输入菜单排序"></el-input>
                </el-form-item>
            </el-form>
        </dialogs>
    </div>
</template>
<script>
import elTable from "@/components/xForm/elTable"
import { mapGetters } from 'vuex'
export default {
    name: 'menus',
    components: {
        elTable
    },
    data () {
        return {
            visible: {
                show: false
            },
            isEditer: false,
            formMenu: {
                sort: 0,
                url: '',
                group: {
                    id: ''
                },
                parentMenu: {
                    id: ''
                },
                name: ''
            },
            formData: {
                currentPage: 1,
                pageSize: 10,
                data: [
                ],
                total: 0
            },
            searchObj: {
                groupId: '',
                status: ''
            },
            searchArray: [
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '用户组',
                    key: 'groupId',
                    list: [
                    ]
                },
                {
                    type: "select",
                    placeholder: "请选择",
                    filterable: false,
                    value: "",
                    width: '',
                    label: '状态',
                    key: 'status',
                    list: [
                    ]
                },
            ],
            groupList: [],
            menuList: []
        }
    },
    computed: {
        ...mapGetters({
            enumAll: 'common/getEnumAll'
        }),
    },
    created () {
        this.init()
    },
    methods: {
        // 获取组
        getGroupList () {
            this.$api.userManage.getUserGroupList().then(r => {
                let list = r.data && r.data  || []
                this.groupList = list
                list = list.map(rr => {
                    return {
                        label: rr.name,
                        value: rr.id
                    }
                })
                this.$set(this.searchArray[0], 'list', list )
            }).finally(() => {
            })
        },
        init () {
            this.$set(this.searchArray[1], 'list', this.enumAll.PutAwayStatus || [])
            this.$set(this.searchArray[0], 'list', this.enumAll.UserGroup || [])
            this.getList()
            this.getGroupList()
        },
        clock (item) {
            this.$confirm(`您确定要${item.status == 0 ? '上架' : '下架'}?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    let param = {}
                    param = {
                        id: item.id,
                        status: item.status == -1 ? 0 : -1
                    }
                    this.$api.system.putMenuChangeStatus(param).then(r => {
                        this.getList()
                    })
                }).catch(() => {
            })
        },
        getList(status = true) {
            if (!status) this.formData.currentPage = 1
            const {formData: {currentPage, pageSize}, searchObj} = this
            let param = {}
            param = {
                currentPage,
                pageSize,
                store: this.$storeId
            }
            for ( let k in searchObj) {
                if (searchObj[k] !== '') {
                    param[k] = searchObj[k]
                }
            }
            this.$loading(true)
            this.$api.system.getMenuList(param).then(r => {
                this.formData.data = r.data && r.data.list || []
                this.formData.total = r.data.total || 0
            }).finally(() => {
                this.$loading(false)
            })
        },
        getAllMenuList () {
            let param = {}
            param = {
                currentPage: 1,
                pageSize: 1000,
                store: this.$storeId,
                status: 2
            }
            this.$api.system.getMenuList(param).then(r => {
                this.menuList = r.data && r.data.list || []
            }).finally(() => {
            })
        },
        editer (item) {
            this.getAllMenuList()
            this.$loading(true)
            this.$api.system.getMenuDetail({id: item.id}).then(r => {
                this.formMenu = {
                    id: r.data.id,
                    group: {id: r.data.group.id || ''},
                    name: r.data.name || '',
                    store: r.data.store,
                    sort: r.data.sort,
                    url: r.data.url,
                    parentMenu: {id: r.data.parentMenu && r.data.parentMenu.id || ''}
                }
                this.isEditer = true
                this.visible.show = true
            }).finally(() => {
                this.$loading(false)
            })
        },
        add () {
            this.getAllMenuList()
            this.visible.show  = true
        },
        save () {
            const {formMenu: {group, id, name, url, sort, parentMenu}} = this
            let param = {}
            if (name == '') {
                this.$message.error('请输入菜单名称')
                return
            }
            if (!group.id) {
                this.$message.error('请选择用户组')
                return
            }
            if (url == '') {
                this.$message.error('请输入菜单地址')
                return
            }
            if (sort === '') {
                this.$message.error('请输入菜单排序')
                return
            }
            param = {
                group,
                name,
                url,
                store: this.$storeId,
                sort
            }
            if (parentMenu.id) {
                param.parentMenu = {
                    id: parentMenu.id
                }
            }
            this.$loading(true)
            let types = !id ? 'addMenu' : 'putUpdateMenu'
            if (id) param.id = id
            this.$api.system[types](param).then(r => {
                this.$message.success(r.message)
                this.visible.show = false
                setTimeout(() => {
                    this.getList()
                })
            }).finally(() => {
                this.$loading(false)
            })
        }
    },
    watch: {
        'visible.show' (val) {
            if (!val) {
                this.formMenu = {
                    name: '',
                    group: {id: ''},
                    url: '',
                    sort: 0,
                    parentMenu: {id: ''}
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.menu {
    .search-form {
        margin-bottom: 16px;
    }
}
</style>